
import React, { memo } from "react";

import { getSizeImage, getCount } from '@/utils/format-utils';
import cs from 'classnames'
import sty from './sty.module.css'
import { Link } from "react-router-dom";

const RadioCover = (props) => {
  const { radio = {} } = props
  return <div className={sty.radioCover}>
    <Link to={`/djradio?id=${radio.id}`}  >
      <img src={getSizeImage(radio.picUrl, 120)} alt="" />
    </Link>
    <div className={sty.info}>
      <h3 className={sty.title}>
        <Link to={`/djradio?id=${radio.id}`} className='text-nowrap'  >{radio.name}</Link>
      </h3>
      <div className={sty.nickname}>
        <i className={cs(sty.icon, 'sprite_icon2')}></i>
        <span className={sty.name}>{radio.dj.nickname}</span>
        {radio.dj.avatarDetail && <img src={radio.dj.avatarDetail.identityIconUrl} alt="" />}
      </div>
      <p className={sty.count}>
        <span>共{radio.programCount}期</span>
        <span className={sty.subscribe}>订阅 {getCount(radio.subCount)}次</span>
      </p>
    </div>
  </div>
}
export default memo(RadioCover)